import {Component} from 'react';
import {Boxs,Avatar} from 'saltui';
import {
	nodataIcon
} from '../../../app/variables';
const {
	HBox,
	Box,
	VBox
} = Boxs;

export default class PageHome extends Component {

	constructor(props) {
        super(props);
        var context = document.getElementById("context").value;
		this.state = {
            isShow:false,
            urlPrev: context + '/api/m/plugin/attachment/mobile/viewImage?fid=',
		}
	}

    showFun(){
        let isShow = this.state.isShow ? false : true;
        this.setState({
            isShow:isShow
        });
    }

    handleOperateClick(item){
        this.props.handleOperateClick(item);
    }

    leaveClick(item){
        this.props.leaveClick(item);
    }

	render() {
        let t = this;
        var token = document.getElementById("token").value;
        var url=t.state.urlPrev;
        let boardArray = t.props.boardArray;
        if(boardArray != null){
		return (
            <div>
                {
                    boardArray.map(function(item,index){
                        let photo_html="";
                        var imageContent ="";
                        if(item.attIdJson!="" && item.attIdJson!=null){
                            var s = "";
                            imageContent = item.attIdJson.map((item1, index) => {
                                 return (
                                     url+item1.id+'&token='+token
                                 );
                            });
                        }
                        photo_html = 
                           ( item.attIdJson=="" || item.attIdJson==null
                            ?
                            <Box className="dd-t-list-img t-MR14" style={{ background: 'rgba(56,172,255,.5)', width: '60', height: '60' }}>
                            <i className="iconfont icon-forum t-FS32 t-LH1_6 t-FCf"></i>
                            </Box>
                            :
                            <Box className="t-MR14" style={{width: '60', height: '60' }}>
                            <img className="t-R4" style={{ width: "100%", height: "100%", objectFit: "cover" }} src={imageContent}/></Box>)
                        if(index <= 2){
							return(               
								<HBox className="dd-top-border t-PL16 t-PR16 t-PT16 t-PB16" vAlign="center">
                                <HBox flex={1} onClick={t.leaveClick.bind(t, item)}>
                                    {photo_html}
                                    <Box className="dd-t-list-text-content" flex={1}>
                                    <p className="dd-t-list-title t-LH1_6 t-omit t-FC3 t-PT6">{item.name}</p>
                                    <div className="dd-t-list-time t-FBAC t-FBH  t-PT6">
                                        <span className="t-FS14 t-FCddfontblue-60 t-MR16">主题 {item.postCount}</span>
                                        <span className="t-FS14 t-FCddfontblue-60">评论 {item.replyCount}</span>
                                    </div>
                                    </Box>
                                </HBox>
                                <Box style={{marginTop:'-40px'}}><i className="iconfont icon-more t-FCddfontblue-40 t-FS30" style={{ marginRight: "-4" }} onClick={t.handleOperateClick.bind(t,item)}></i></Box>
                                </HBox>
							)		
						}else{
                            return(
                                <div style={{display:t.state.isShow?'block':'none'}} >
                                <HBox className="dd-top-border t-PL16 t-PR16 t-PT16 t-PB16" vAlign="center">
                                <HBox flex={1} onClick={t.leaveClick.bind(t, item)}>
                                   <Box className="dd-t-list-img t-MR14 "  style={{ background: 'rgba(56,172,255,.5)', width: '60', height: '60' }}>
                                    {photo_html}
                                    </Box>
                                    <Box className="dd-t-list-text-content" flex={1} >
                                    <p className="dd-t-list-title t-LH1_6 t-omit t-FC3 t-PT6">{item.name}</p>
                                    <div className="dd-t-list-time t-FBAC t-FBH  t-PT6">
                                        <span className="t-FS14 t-FCddfontblue-60 t-MR16">主题 {item.postCount}</span>
                                        <span className="t-FS14 t-FCddfontblue-60">评论 {item.replyCount}</span>
                                    </div>
                                    </Box>
                                </HBox>
                                <Box style={{marginTop:'-40px'}}><i className="iconfont icon-more t-FCddfontblue-40 t-FS30" style={{ marginRight: "-4" }} onClick={t.handleOperateClick.bind(t,item)}></i></Box>
                                </HBox>
                                </div>
                            )
                        }
                    }.bind(this))
                }        
                <div className={boardArray.length > 3 ? "forums-nav" : "t-DN"}>
                    <span className="t-FS14 t-FCddblue t-DB dd-top-border" style={{textAlign:'center',paddingTop:'11',paddingBottom:'11'}} onClick={t.showFun.bind(t)}>{t.state.isShow ? '收起' : '查看全部'}<i></i>
                    <i className={t.state.isShow ? "iconfont icon-arrow-up t-FS20 t-ML14" : "iconfont icon-arrow-down t-FS20 t-ML14"}></i> </span>
                </div>
                <div className="t-H10 t-BCf7"></div>
            </div>
        )
    }else{
        return (
            <div className="dd-nodata">
                <VBox hAlign="center">

                </VBox>
		    </div>
        )
    }
	}
}